<template>
  <!-- 食物详情 -->
  <div class="dateil">
    <div class="imageBox">
      <img :src="foodsDetailData.image" alt="">
    </div>
    <div class="itemBox">
      <span class="name">{{foodsDetailData.name}}</span>
      <div class="sellCountBox">
        <span class="sellCount">月售{{foodsDetailData.sellCount}}份</span>
        <span class="rating">好评率{{foodsDetailData.rating}}%</span>
      </div>
      <div class="priceBox">
        <span>&yen;</span>
        <span>{{foodsDetailData.price}}</span>
        <span v-if="foodsDetailData.oldPrice">&yen;{{foodsDetailData.oldPrice}}</span>
      </div>
      <div class="addCart">
        <span class="tt">加入购物车</span>
      </div>
    </div>
    <divider></divider>
    <div class="itemBox">
      <span class="name">商品介绍</span>
      <p class="info">{{foodsDetailData.info}}</p>
    </div>
    <divider></divider>
    <div class="itemBox">
      <span class="name">商品评价</span>
      <div class="selectBox">
        <div class="btnBox">
          <div class="btnItem" :class="{active: isSelect === -1}" @click="btnFn(-1)">
            <span class="tt">全部</span>
            <span class="num">{{foodsDetailData.ratings.length}}</span>
          </div>
          <div class="btnItem" :class="{active: isSelect === 0}" @click="btnFn(0)">
            <span class="tt">推荐</span>
            <span class="num">{{recommendNum}}</span>
          </div>
          <div class="btnItem" :class="{active: isSelect === 1}" @click="btnFn(1)">
            <span class="tt">吐槽</span>
            <span class="num">{{foodsDetailData.ratings.length - recommendNum}}</span>
          </div>
        </div>
        <div class="iconBox" @click="hasComment = !hasComment">
          <i class="icon icon-check_circle" :class="{active: hasComment}"></i>
          <span class="tt">只看有内容的评价</span>
        </div>
      </div>
      <div class="commentBox">
        <!-- v-show="hasComment ? commentItem.text : 'true'" 只看有内容的评价 -->
        <div class="commentItem" v-for="(commentItem, commentIndex) in ratingsDataCmp" :key="commentIndex" v-show="hasComment ? commentItem.text : 'true'">
          <div class="infoBox clearfix">
            <span class="rateTime fl">{{commentItem.rateTime}}</span>
            <img class="avatar fr" :src="commentItem.avatar" alt="">
            <span class="username fr">{{commentItem.username}}</span>
          </div>
          <div class="textBox">
            <i class="icon" :class="commentItem.rateType ? 'icon-thumb_down': 'icon-thumb_up upIcon'"></i>
            <span class="text">{{commentItem.text}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex' // 引入vuex
  import divider from '../../components/divider' // 引入分割线
  import utils from '../../utils/index' // 引入工具类  处理时间戳为指定时间格式
  export default {
    data() {
      return {
        hasComment: false, // 只看有内容的评价
        isSelect: -1, // 默认 全部按钮
        ratingsData: [] // 商品详情副本
        // foodsDetailData: {
        //   'name': '皮蛋瘦肉粥',
        //   'price': 10,
        //   'oldPrice': '20',
        //   'description': '咸粥',
        //   'sellCount': 229,
        //   'rating': 100,
        //   'info': '一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足',
        //   'ratings': [
        //     {
        //       'username': '3******c',
        //       'rateTime': 1469281964000,
        //       'rateType': 0,
        //       'text': '很喜欢的粥',
        //       'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
        //     },
        //     {
        //       'username': '2******3',
        //       'rateTime': 1469271264000,
        //       'rateType': 0,
        //       'text': '',
        //       'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
        //     },
        //     {
        //       'username': '3******b',
        //       'rateTime': 1469261964000,
        //       'rateType': 1,
        //       'text': '',
        //       'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
        //     }
        //   ],
        //   'icon': 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114',
        //   'image': 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750'
        // }
      }
    },
    computed: {
      ...mapState(['foodsDetailData']), // 获取从vuex存在中的商品详情
      recommendNum() { // 推荐的个数
        let num = 0
        for (let i = 0; i < this.foodsDetailData.ratings.length; i++) {
          if (this.foodsDetailData.ratings[i].rateType === 0) { // 推荐
            num += 1
          }
        }
        return num
      },
      ratingsDataCmp() { // foodsDetailData2
        if (!this.ratingsData.length) {
          this.ratingsData = this.foodsDetailData.ratings
        }
        console.log(this.ratingsData)
        let arr = []
        this.ratingsData.forEach(item => {
          item.rateTime = utils.formatTime(new Date(item.rateTime))
          arr.push(item)
        })
        return arr
      }
      // data1() {
      //   let json = JSON.parse(this.foodsDetailData)
      //   return json
      // }
    },
    // mounted() {
    // }
    onLoad (option) {
      // this.id = option.id
      // this.name = option.name
      // console.log(option.foodsDetailData)
      // this.foodsDetailData = JSON.parse(option.foodsDetailData) url限制 传过去不完整 解析错误  使用vuex
      // console.log('小程序 [page-blog] 生命周期: onLoad: 监听页面加载')
    },
    components: { // 注册组件
      divider
    },
    methods: {
      btnFn(index) { // 全部 推荐 吐槽 按钮切换
        this.isSelect = index
        this.ratingsData = this.foodsDetailData.ratings
        if (index === 0) {
          this.ratingsData = this.ratingsData.filter(item => item.rateType === index)
        } else if (index === 1) {
          this.ratingsData = this.ratingsData.filter(item => item.rateType === index)
        }
      }
    }
  }
</script>

<style lang="sass" scoped>
.dateil
  width: 750rpx
  height: 100%
  .imageBox
    width: 750rpx
    height: 750rpx
    overflow: hidden
    & > img
      width: 100%
      height: 100%
  .itemBox
    position: relative
    padding: 36rpx
    .name
      font-size: 28rpx
      font-weight: 700
      line-height: 28rpx
      color: rgba(7, 17, 27, 1)
    &:nth-of-type(2)
      .sellCountBox
        margin: 16rpx 0 36rpx 0
        font-size: 20rpx
        line-height: 20rpx
        color: rgba(147, 156, 159, 1)
        .sellCount
        .rating
          display: inline-block
          margin-left: 24rpx
      .priceBox
        font-size: 0
        & > span
          font-size: 20rpx
          font-weight: 700
          line-height: 48rpx
          &:nth-of-type(1)
            color: rgba(240, 20, 20, 1)
          &:nth-of-type(2)
            display: inline-block
            margin: 0 16rpx 0 4rpx
            font-size: 28rpx
            line-height: 48rpx
            color: rgba(240, 20, 20, 1)
          &:nth-of-type(3)
            vertical-align: top
            text-decoration: line-through
            color: rgba(147, 153, 159, 1)
      .addCart
        position: absolute
        right: 36rpx
        bottom: 36rpx
        padding: 12rpx 24rpx
        font-size: 0
        border-radius: 24rpx
        background-color: rgba(0, 160, 220, 1)  
        .tt
          font-size: 20rpx
          color: #fff
    &:nth-of-type(4)
      .name
        font-weight: normal
      .info
        padding: 12rpx 16rpx
        font-size: 24rpx
        font-weight: 200
        line-height: 48rpx
        text-align: justify
        color: rgba(77, 85, 93, 1)
    &:nth-of-type(6)
      padding: 36rpx 0 0 0
      .name
        padding: 0 0 12rpx 36rpx
        font-weight: normal
      .selectBox
        padding: 0 36rpx
        .btnBox
          margin: 24rpx 0 36rpx 0
          .btnItem
            display: inline-block
            padding: 16rpx 24rpx
            margin-left: 16rpx
            border-radius: 2rpx
            background-color: rgba(77, 85, 93, 0.2)
            transition: all .2s
            &:first-child
              margin-left: 0
            .tt
              margin-right: 8rpx
              font-size: 24rpx
              line-height: 32rpx
              color: rgba(77, 85, 93, 1)
            .num
              font-size: 16rpx
              line-height: 32rpx
            &.active
              background-color: rgba(0, 160, 220, 1)
              .tt, .num
                color: rgba(255, 255, 255, 1)
        .iconBox
          padding: 24rpx 0
          font-size: 0
          line-height: 48rpx
          color: rgba(147, 153, 159, 1)
          border-top: 1rpx solid rgba(7, 17, 27, 0.1)
          .icon
            display: inline-block
            margin-right: 8rpx
            vertical-align: top
            font-size: 48rpx
            &.active
              color: rgba(0, 160, 220, 1)
          .tt
            font-size: 24rpx
      .commentBox
        padding: 0 36rpx
        border-top: 1rpx solid rgba(230, 231, 232, 1)
        .commentItem
          padding: 32rpx 0
          border-bottom: 1rpx solid rgba(7, 17, 27, 0.1)
          .infoBox
            .rateTime, .username
              font-size: 20rpx
              line-height: 24rpx
              color: rgba(147, 153, 159, 1)
            .avatar
              margin-left: 12rpx
              width: 24rpx
              height: 24rpx
              border-radius: 50%
          .textBox
            margin-top: 12rpx
            .icon
              display: inline-block
              vertical-align: middle
              font-size: 24rpx
              line-height: 48rpx
              color: rgba(147, 153, 159, 1)
              &.upIcon
                color: rgba(0, 160, 220, 1)
            .text
              margin-left: 8rpx
              font-size: 24rpx
              line-height: 32rpx
              color: rgba(7, 17, 27, 1)
</style>
